<template>
  <div id="home">
    <app-header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></app-header>
    <users v-bind:users="users"></users>
    <users v-bind:users="users"></users>
    <app-footer v-bind:title="title"></app-footer>
  </div>
</template>

<script>

//局部注册组件
import Users from './Users'
import Header from './Header'
import Footer from './Footer'

export default {
  name: 'home12341234',
  data(){
    return{
      users:[
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false},
          // {name:"Leo",position:"web开发",show:false}
        ],
        title:"传递的是值,包括 number string boolean",
    }
  },
  methods:{
    updateTitle: function(title){
      this.title=title;
    }
  },
  components:{
    "users":Users,
    "app-header":Header,
    "app-footer":Footer
  },
  created:function(){
    this.$http.get("http://jsonplaceholder.typicode.com/users").then(data =>{
      this.users=data.body;
    })
  }
}
</script>

<style scoped>
  h1{
    color:purple;
  }
</style>
